<template>
  <div>
      <p style="text-align:right;margin:10px 0">
          <span style="color:red;text-decoration:underline;cursor:pointer" @click="add">添加假期</span>
      </p>
      <div
        style="position:fixed;top:0;left:0;background:rgba(0,0,0,.3);width:100%;height:100%;z-index:999" v-if="isShow">
            <el-card style="width:500px;height:600px;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto">
                <h3>添加假期</h3>
                <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                <span style="font-size:14px">*结束日期当天也属假期范围</span>
                </el-form-item>
                <el-form-item label="时间">
                    <el-checkbox-group v-model="form.type">
                    <el-checkbox label="全天" name="type"></el-checkbox>
                    <el-checkbox label="上午" name="type"></el-checkbox>
                    <el-checkbox label="下午" name="type"></el-checkbox>
                    <el-checkbox label="晚上" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>返回</el-button>
                </el-form-item>
                </el-form>
            </el-card>
      </div>
 <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期">
    </el-table-column>
    <el-table-column
      prop="time"
      label="时间">
    </el-table-column>
    <el-table-column
      prop="remarks"
      label="备注">
    </el-table-column>
    <el-table-column
      prop="operation"
      label="操作">
      <span style="color:red;text-decoration:underline;cursor:pointer;margin:0 20px">修改</span>
      <span style="color:red;text-decoration:underline;cursor:pointer;margin:0 20px">删除</span>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
    name:'Vacation',
    data() {
      return {

        isShow:false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        tableData: [{
          date: '2016.05.02-2016-05-02',
          time: '上午',
          remarks: '旅游去',
        },{
          date: '2016.05.02-2016-05-02',
          time: '上午',
          remarks: '旅游去',
        },{
          date: '2016.05.02-2016-05-02',
          time: '上午',
          remarks: '旅游去',
        }]
      }
    },
    methods:{
        add(){
            this.isShow=!this.isShow
        },
        onSubmit(){
            this.isShow=!this.isShow
        }
    }

}
</script>

<style>

</style>